const path = require('path')
const { dependencies } = require('../package.json')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { HotModuleReplacementPlugin, LoaderOptionsPlugin, DefinePlugin } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
// -p / --optimize-minimize 启用 uglifyjs 压缩
// webpack externals
const whiteListModuleArr = ['vue']

const configure = {
    mode: 'development', // production 自动开启压缩功能
    target: 'electron-renderer',
    devtool: 'source-map',
    externals: [...Object.keys(dependencies || {}).filter((d) => !whiteListModuleArr.includes(d))],
    entry: {
        renderer: path.resolve(__dirname, '../src/renderer/main.ts'),
    },
    output: {
        filename: '[name].js',
        libraryTarget: 'commonjs2',
        path: path.resolve(__dirname, '../dist'),
    },
    devServer: {
        port: 8081,
        overlay: { errors: true },
        hot: true
    },
    resolve: {
        extensions: ['.js', '.json', '.ts', '.vue', '.css', '.scss'],
        alias: {
            '@': path.join(__dirname, '../src/renderer')
        }
    },
    module: {
        rules: [
            {
                test: /\.s(c|a)ss$/,
                use: ['style-loader', 'css-loader', {
                    loader: 'sass-loader',
                    options: {
                        implementation: require('sass'),
                        sassOptions: {
                            fiber: require('fibers')
                        }
                    }
                }],
            },
            {
                test: /\.css$/,
                oneOf: [
                    // 用于 <style module>
                    {
                        resourceQuery: /module/,
                        use: ['style-loader', {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                localIdentName: '[local]_[hash:base64:8]'
                            }
                        }]
                    },
                    // 用于 <style> 或 <style scoped>
                    {
                        use: ['style-loader', 'css-loader']
                    }
                ]
            },
            {
                test: /\.html$/,
                use: ['vue-html-loader']
            },
            {
                test: /\.(tsx?|jsx?)$/,
                exclude: /node_moudles/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                [
                                    '@babel/preset-typescript', // ts 插件
                                    {
                                        allExtensions: true // 支持所有扩展名
                                    }
                                ]
                            ],
                        }
                    }
                ],
            },
            {
                test: /\.pug$/,
                oneOf: [
                    {
                        resourceQuery: /^\?vue/,
                        use: ['pug-plain-loader'],
                    },
                    {
                        use: ['raw-loader', 'pug-plain-loader']
                    }
                ]
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader',
                    options: {
                        extractCSS: true
                    }
                }, // 处理 vue,同时将 lang=ts 转交给 babel-loader
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    query: {
                        limit: 10000,
                        name: 'imgs/[name]--[folder].[ext]'
                    }
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'meida/[name]--[folder].[ext]'
                    }
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    query: {
                        limit: 10000,
                        name: 'fonts/[name]--[folder].[ext]'
                    }
                }
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['dist'] }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({ filename: 'styles.css' }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, "../src/index.ejs"),
            // minify: {
            //     collapseWhitespace: true,
            //     // removeAttributeQuotes: true,
            //     removeComments: true
            // },
        }),
        new HotModuleReplacementPlugin()
    ]
}

if (process.env.NODE_ENV === 'production') {
    configure.devtool = 'hidden-source-map'
    configure.plugins.push(
        new DefinePlugin({
            'process.env.NODE_ENV': `'production'`
        }),
        new LoaderOptionsPlugin({ minimize: true })
    )
} else {
    configure.devtool = 'source-map'
}
module.exports = configure;